<template>
  <div id="jiangshi">
    <infoInS></infoInS>
    <div class="jiaShi" v-if="list.teacher">
      <div>
        <img :src="list.teacher.avatar"/>
        <span>{{ list.teacher.real_name }}</span>
      </div>
      <div>
        <button v-if="list.flag == 1" @click="asd(list.teacher.id)">
          关注
        </button>
        <button v-if="list.flag == 2" @click="asd(list.teacher.id)">
          取消关注
        </button>
      </div>
    </div>
    <jieSha :active="active" @BtnClick="btnClick">
      <div v-show="activeA == 0">1</div>
      <div v-show="activeA == 1">2</div>
      <div v-show="activeA == 2">3</div>
    </jieSha>
  </div>
</template>
<script>
import jieSha from "@/views/1/jikou/ioio/jieshao.vue";
import infoInS from "@/views/1/jikou/ioio/infoinS.vue";
import { getTeacher, getCollect } from "./jikou/jiekou";
export default {
  components: {
    infoInS,
    jieSha,
  },
  data() {
    return {
      activeA: 0,
      active: [
        { id: "0", title: "讲师介绍" },
        { id: "1", title: "主讲课程" },
        { id: "2", title: "学习评价" },
      ],
      list: {},
    };
  },
  mounted() {
    this.getTea();
  },
  methods: {
    btnClick(c) {
      this.activeA = c;
    },
    async getTea() {
      let res = await getTeacher(this.$route.query.cid);
      //   console.log(res);
      this.list = res.data.data;
    },
    async asd(id) {
      let res = await getCollect(id);
        //  console.log(res);
      this.getTea();
    },
  },
};
</script>
<style lang="scss" scoped>
#jiangshi {
  width: 100%;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.2);
  .jiaShi {
    width: 90%;
    height: 100px;
    margin: auto;
    margin-top: -50px;
    border-radius: 10px;
    background-color: white;
    display: flex;
    justify-content: space-between;
    > div {
      display: flex;
      align-items: center;
      margin: 10px;
      img {
        width: 60px;
        height: 60px;
        border-radius: 50%;
      }
      span {
        font-size: 20px;
      }
      button {
        width: 60px;
        height: 30px;
        border-radius: 40px;
        border: none;
        font-size: 12px;
      }
    }
  }
}
</style>